<template>
	<div class="main-con" v-loading="loading">
		<div class="head-card">
			<div class="img-con">
				<img class="left-img" src="@/assets/image/serverRoom/zcgl.svg" />
			</div>
			<el-descriptions class="head-descriptions" :title="`资产编号: ${assetInfoData.assetNum}`" :column="2">
				<el-descriptions-item label="创建人">{{ assetInfoData.createUserName }}</el-descriptions-item>
				<el-descriptions-item label="创建时间">{{ dateFormat(assetInfoData.createTime) }}</el-descriptions-item>
				<el-descriptions-item label="资产类型">{{ assetInfoData.assetTypeName }}</el-descriptions-item>
				<el-descriptions-item label="所属项目">{{ assetInfoData.proName }}</el-descriptions-item>
			</el-descriptions>
			<div class="status">
				<div style="font-size: 18px;font-family: PingFang SC;font-weight: bold;color: #666666;">状态</div>
				<div style="font-size: 28px;font-family: PingFang SC;font-weight: bold;color: #333333;">{{ assetInfoData.stateName }}</div>
			</div>
		</div>
		<div class="info-con">
			<el-tabs class="tabs" v-model="infoTabs" tab-position="top">
				<el-tab-pane label="详情" name="1">
					<div class="title-con">
						基本信息
					</div>
					<el-descriptions class="info-descriptions" :column="2">
						<el-descriptions-item label="资产编号">{{ assetInfoData.assetNum }}</el-descriptions-item>
						<el-descriptions-item label="资产类型">{{ assetInfoData.assetTypeName }}</el-descriptions-item>
						<el-descriptions-item label="资产型号">{{ assetInfoData.assetModel }}</el-descriptions-item>
						<el-descriptions-item label="资产序列号">{{ assetInfoData.assetSerialNum }}</el-descriptions-item>
						<el-descriptions-item label="资产IP">{{ assetInfoData.hostIp }}</el-descriptions-item>
						<el-descriptions-item label="资产位置">{{ assetInfoData.assetPlaceName }}</el-descriptions-item>
						<el-descriptions-item label="资产厂商">{{ assetInfoData.manufacturerName }}</el-descriptions-item>
					</el-descriptions>
					<div class="title-con">
						项目信息
					</div>
					<el-descriptions class="info-descriptions" :column="2">
						<el-descriptions-item label="项目名称">{{ assetInfoData.proName }}</el-descriptions-item>
						<el-descriptions-item label="项目编号">{{ assetInfoData.proCode }}</el-descriptions-item>
						<el-descriptions-item label="项目负责人">{{ assetInfoData.proLeaderName }}</el-descriptions-item>
					</el-descriptions>
				</el-tab-pane>
				<el-tab-pane label="轨迹" name="2">
					<el-timeline style="margin: 0 20px;" v-if="assetInfoData.assetLocusList" reverse>
						<el-timeline-item placement="top" v-for="(item, index) in assetInfoData.assetLocusList" :key="index" :timestamp="item.logTime">
							<el-card>
								<h4>{{ item.content }}</h4>
								<p>{{ item.roleName }}: {{ item.userName }}</p>
							</el-card>
						</el-timeline-item>
					</el-timeline>
				</el-tab-pane>
				<!-- <el-tab-pane label="资产二维码" name="3"> </el-tab-pane> -->
			</el-tabs>
		</div>
	</div>
</template>

<script>
	import assetApi from '@/api/assetApi'
	import { getAction } from '@/utils/httpUtil'
	import { dateFormat } from '@/utils/public'
	export default {
		name: 'assetInfo',
		data() {
			return {
				assetInfoData: {},
				infoTabs: '1',
				loading: false,
			}
		},
		mounted() {
			const { params } = this.$route
			if (params && params.id) {
				this.loadInfo(params.id)
			}
		},
		methods: {
			dateFormat,
			loadInfo(id) {
				this.loading = true
				getAction(assetApi.asset.detial + id).then(res => {
					this.loading = false
					if (res.success && res.info) {
						this.assetInfoData = res.info
					}
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.head-card {
		background: #ffffff;
		height: 160px;
		padding: 15px 15px 10px 15px;
		box-shadow: 0px 0px 12px 0px rgba(129, 155, 151, 0.3);
		border-radius: 6px;
		display: flex;
		flex-direction: row;
	}

	.img-con {
		width: 64px;
		height: 64px;
		border-radius: 50%;
		text-align: center;
		background: linear-gradient(-28deg, #22b6de, #33e4da);

		img {
			width: 27px;
			height: 27px;
			margin-top: 18px;
			box-shadow: 2px 6px 5px 0px rgba(25, 90, 166, 0.23);
		}
	}

	.head-descriptions {
		flex: 1;
		margin: 15px 0 0 15px;
	}

	.status {
		// width: 80px;
		text-align: right;
	}

	.info-con {
		margin-top: 10px;
		padding: 10px 15px;
		height: calc(100% - 170px);
		background: #ffffff;
		box-shadow: 0px 0px 12px 0px rgba(129, 155, 151, 0.3);
		border-radius: 6px;
	}

	.tabs {
		height: 100%;

		/deep/.el-tabs__content {
			height: calc(100% - 55px);
			.el-tab-pane {
				height: 100%;
				overflow-y: auto;
			}
		}
	}

	.title-con {
		height: 22px;
		padding-left: 10px;
		border-left: 2px solid rgba(33, 183, 149, 1);
		font-size: 16px;
		font-family: PingFang SC;
		font-weight: bold;
		color: #000000;
		margin-bottom: 10px;
	}

	.info-descriptions {
		margin-left: 80px;
		margin-bottom: 15px;
	}
</style>
